<template>
	<div class="chooseMatch">
		<div class="chooseMatch-wrap">
			<right-header :header-name="headerName" :is-show="true" :trans-number="transNumber" 
				:show-border="true"></right-header>
			<el-steps :space="type=='1'?200:500" :active="type=='1'?4:2" :center="true" :align-center="true" class="steps">
			  	<el-step title="新建候选名单" v-if="type=='1'"></el-step>
			  	<el-step title="确认候选者／等待配型" v-if="type=='1'"></el-step>
			  	<el-step title="HLA配型"></el-step>
			  	<el-step title="选择配型患者"></el-step>
			</el-steps>
			<div class="title-wrap">
				<div class="title">
					<el-input
					  	placeholder="输入患者姓名进行搜索"
					  	icon="search"
					  	v-model="search"
					  	:on-icon-click="handleIconClick">
					</el-input>
				</div>
			</div>
			<el-table class="table-wrap"
			    :data="tableData"
			    stripe
			    style="width: 100%">
			    <el-table-column 
			    	prop="order" label="排名" align="center" min-width="100px">
			    	<template scope="scope">
			      		<span class="order" :class="{'mark':scope.row.order>3}">{{scope.row.order}}</span>
			      	</template>
			    </el-table-column>
			    <el-table-column
			      	prop="person" label="匹配患者" align="center" min-width="120px">
			    </el-table-column>
			    <el-table-column
			      	prop="MM" label="MM" align="center" min-width="90px">
			    </el-table-column>
			    <el-table-column
			      	prop="HLA" label="匹配基因位点" align="center" min-width="195px">
			    </el-table-column>
			    <el-table-column
			      	prop="waitPeriod" label="已登记时间（天）" align="center" min-width="150px">
			    </el-table-column>
			    <el-table-column
			      	prop="info" label="基本信息" align="center" min-width="180px">
			    </el-table-column>
			    <el-table-column
			      	prop="check" label="术前检查" align="center" min-width="160px">
			      	<template scope="scope">
			      		<el-popover
						  	placement="bottom"
						  	width="230"
						  	trigger="hover">
						  	<span class="text-hidden orange" slot="reference">{{scope.row.check}}</span>
						  	<div class="popover-wrap">
						  		<div class="item red">测试</div>
						  		<div class="item orange">测试</div>
						  	</div>
						</el-popover>
			      	</template>
			    </el-table-column>
			    <el-table-column
			      	prop="telephone" label="联系方式" align="center" min-width="140px">
			    </el-table-column>
			    <el-table-column label="操作" align="center" min-width="90px">
			      	<template scope="scope">
			      		<el-radio class="radio" v-model="chooseData" :label="scope.row.order">&nbsp;</el-radio>
			      	</template>
			    </el-table-column>
			</el-table>
		</div>
		
		<div class="btn-footer">
			<el-button @click="back">上一步</el-button><!--
			--><el-button :class="{disabled:chooseData==''}" type="primary" @click="choose()">配型</el-button>
		</div>
		
		<el-dialog class="modal-wrap"
		  	:visible.sync="showModal"
		  	size="tiny" :show-close="false"
		  	>
		  	<span slot="title" class="dialog-title">
		    	配型成功
		  	</span>
		  	<div class="content-wrap">
		  		<div class="item icons">
		  			<i class="iconfont icon-chenggong"></i>
		  		</div>
		  		<div class="item">
					患者欧阳维维与移植编号00017的肾源配型成功，请尽快进行手术
				</div>
				<div class="item choose">
					<div class="label">选择主管医生</div>
					<div class="input">
						<el-radio class="radio" v-model="doctor" 
						v-for="(item,index) in doctorList" :key="item.id" :label="item.id">{{item.doctorName}}</el-radio>
					</div>
					
				</div>
		  	</div>
		  	<span slot="footer" class="dialog-footer">
		    	<el-button @click="showModal = false">取消</el-button><!--
		    	--><el-button type="primary" @click="sureChoose()">确认</el-button>
		  	</span>
		</el-dialog>
	</div>
</template> 

<style lang='scss' rel='stylesheet/scss'>
	.chooseMatch{
		.el-button--default{
			border: 1px solid #06AEA6;
			color: #666;
		}
		.el-button--default:hover{
			color: #06AEA6;
		}
		.chooseMatch-wrap{
			padding: 0 20px;
			.title-wrap{
				padding-bottom: 20px;
				.title{
					display: inline-block;
					.el-input__icon{
						color: #fff;
					    background: #06AEA6;
					    font-size: 18px;
					}
					.el-input, .el-input__inner{
						width: 312px;
						color: #999;
					}
					.el-input__inner{
						border-radius: 0px;
						border: 1px solid #B3B3B3;
					}
				}
			}
			.table-wrap{
				.order{
					display: inline-block;
					background: #FFBF47;
					color: #fff;
					height: 30px;
					line-height: 30px;
					width: 30px;
					border-radius: 15px;
					margin: 5px;
				}
				.mark{
					background: #999;
				}
				.text-hidden{
					text-overflow: ellipsis;
					white-space:nowrap;
					overflow:hidden;
				}
				.red{
					color: #dd1010;
				}
				.orange{
					color: #ff8d47;
				}
			}
		}
		.btn-footer{
			height: 72px;
			line-height: 72px;
			padding-right: 46px;
			text-align: right;
			background-color: #eee;
			box-shadow: inset 1px 0 4px 0 rgba(202,202,202,.5);
			border-top: 1px solid #E5E5E5;
			margin-top: 10px;
			.el-button+.el-button{
				margin-left: 20px;
			}
			.disabled{
				background-color: #ccc;
				border-color: #ccc;
				cursor: not-allowed;
			}
		}
		.el-dialog__footer{
			.el-button+.el-button{
				margin-left: 40px;
			}
		}
		.modal-wrap{
			.choose{
				display: flex;
				.label{
					width: 141px;
					margin-right: 20px;
				}
				.input{
					.el-radio + .el-radio{
						margin-left: 0;
					}
					.el-radio__label{
						display: inline-block;
						margin-right: 40px;
					}
					.el-radio:nth-child(n+4){
						padding-top: 10px;
					}
				}
			}
		}
	}
	.popover-wrap{
		font-size: 12px;
		.item{
			margin-bottom: 14px;
		}
		.item:last-child{
			margin-bottom: 0;
		}
		.red{
			color: #e34949;
		}
		.orange{
			color: #ff8d47;
		}
	}
</style>

<script>
	import rightHeader from '@/components/rightHeader'
	import pagination from '@/components/pagination'
	export default {
		data() {
			return {
				headerName: '肾源配型',
				transNumber: '000016',
				type: this.$route.params.type,
				search:'',
				tableData:[{
					order:1,
					person:'欧阳',
					MM:'1',
					HLA:'DR1/DR2/B1/A2',
					waitPeriod:'156',
					info:'女  34岁  161cm  56kg',
					check:'乙肝表面抗原阳性/丙肝丙肝丙肝',
					telephone:'15678972346'
				},{
					order:2,
					person:'欧阳',
					MM:'1',
					HLA:'DR1/DR2/B1/A2',
					waitPeriod:'156',
					info:'女  34岁  161cm  56kg',
					check:'乙肝表面抗原',
					telephone:'0571-1234567'
				},{
					order:3,
					person:'欧阳',
					MM:'1',
					HLA:'DR1/DR2/B1/A2',
					waitPeriod:'156',
					info:'女  34岁  161cm  56kg',
					check:'乙肝表面抗原',
					telephone:'15678972346'
				},{
					order:4,
					person:'欧阳',
					MM:'1',
					HLA:'DR1/DR2/B1/A2',
					waitPeriod:'156',
					info:'女  34岁  161cm  56kg',
					check:'乙肝表面抗原',
					telephone:'15678972346'
				}],
				doctorList:[{
					doctorName: '张三1',
					id:'1',
				},{
					doctorName: '张三2',
					id:'2',
				},{
					doctorName: '张三3',
					id:'3',
				},{
					doctorName: '张三4',
					id:'4',
				},{
					doctorName: '张三5',
					id:'5',
				}],
				doctor:'1',
				showModal: false,
				chooseData:''
			}
		},
		components: {
			'right-header': rightHeader,
			'v-pagination':pagination
		},
		methods: {
			back(){
				var self = this;
          		self.$router.push('/kidney/HLAMatch/'+self.type);
			},
			handleIconClick(){

			},
			sureChoose(){
				var self = this;
          		self.$router.push('/kidney');
			},
			choose(){
				var self = this;
				if(self.chooseData===''){
					return;
				}
				self.showModal = true;
			}
			
		}
	}
</script>
